<template>
	<view class="app_Cont">
		<view class="showCont" v-if="showCont">
			<view class="formCont">
				<view class="formTitle">订单信息</view>
				<view class="formDesItem">
					<view class="desName">订单编号</view>
					<view class="desText">{{formData.sign_number}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">已付定金</view>
					<view class="desText">¥{{formData.pay_money}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">总培训费</view>
					<view class="desText">¥{{formData.total_money}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">剩余待付</view>
					<view class="desText">¥{{(Number(formData.total_money)-Number(formData.pay_money)).toFixed(2)}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">创建时间</view>
					<view class="desText">{{formData.create_time}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">支付时间</view>
					<view class="desText">{{formData.pay_time}}</view>
				</view>
				<view class="formDesItem" >
					<view class="desName">核销时间</view>
					<view class="desText">{{formData.complete_time}}（{{formData.hy_amdin_name}}）</view>
				</view>
				<view class="formDesItem" v-if="formData.pay_status==5">
					<view class="desName">取消时间</view>
					<view class="desText">{{formData.cancel_time}}</view>
				</view>
			</view>
			<view class="formCont">
				<view class="formTitle">学员信息</view>
				<view class="formDesItem">
					<view class="desName">姓名</view>
					<view class="desText">{{formData.real_name}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">手机号</view>
					<view class="desText">{{formData.mobile}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">身份证号</view>
					<view class="desText">{{formData.id_card}}</view>
				</view>
			</view>
			<view class="formCont">
				<view class="formTitle">证书邮寄信息</view>
				<view class="formDesItem">
					<view class="desName">收货人</view>
					<view class="desText">{{formData.zs_shr}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">手机号</view>
					<view class="desText">{{formData.zs_mobile}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">详细地址</view>
					<view class="desText">{{formData.zs_city}}{{formData.zs_address}}</view>
				</view>
			</view>
			<view class="formCont" v-if="formData.training_content">
				<view class="formTitle">培训信息</view>
				<view class="formDesItem">
					<view class="desName">培训名称</view>
					<view class="desText">{{formData.training_content.training_name}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">培训时长</view>
					<view class="desText">{{formData.training_content.training_time}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">开班时间</view>
					<view class="desText">{{formData.training_content.training_sk_time}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">培训学校</view>
					<view class="desText">{{formData.training_content.training_school_name}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">报道地点</view>
					<view class="desText">{{formData.training_content.training_address}}</view>
				</view>
			</view>
			<view class="cardItem" v-if="formData.training_content">
				<view class="cardHead cardFlex">
					<view>费用说明</view>
					<view class="cardMoney">合计：¥{{formData.total_money}}</view>
				</view>
				<view class="cardForm">
					<view :class="index%2==0?'formItem ':'formItem formItemPlain'" :key="index" v-for="(item,index) in formData.training_content.tuition_fee_data">
						<view class="formName">{{item.name}}</view>
						<view :class="index%2==0?'formText':'formText formTextPalin'">
							<view>
								<text v-if="index==0">{{item.content}}<text class="redText">（{{item.money}}元）</text></text>
								<text v-if="index>0">
									<text v-if="Number(item.money)">需到校缴费<text class="redText">（{{item.money}}元）</text></text>
									<text v-if="!Number(item.money)">已含在培训费内，无需额外缴纳</text>
								</text>
							</view>
							<view class="formTextDes" v-if="index>0&&item.content">说明：{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<load v-if="!showCont"></load>
	</view>
</template>

<script>
	
	import api from '@/http/api.js'
	import load from '@/components/load.vue'
	export default {
		components:{load},
		data() {
			return {
				
				showCont:false,
				formData:{},
				detailId:'',
			};
		},
		methods:{
			getData(){
				let data = {
					verification_record_id:this.detailId,
				}
				api.getRequst(data,'/api/School/VerificationRecordDetails').then((res)=>{
					if(res.code==1){
						this.formData = res.data
					}
					this.showCont = true
				})
			}
		},
		onLoad(option) {
			this.detailId = option.id
			this.getData()
		}
	}
</script>

<style lang="scss">
.showCont{
	min-height: 100vh;
	.formCont{
		background-color: #fff;
		border-radius: 30rpx;
		padding: 40rpx 30rpx 30rpx;
		width: 92%;
		margin: 30rpx auto 30rpx;
		box-sizing: border-box;
		.formTitle{
			font-size: 32rpx;
			margin-bottom: 30rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.addBtn{
				font-size: 24rpx;
				font-weight: normal;
				color: #3f55cc;
			}
		}
		.formDesItem{
			width: 100%;
			display: flex;
			margin-bottom: 20rpx;
			justify-content: space-between;
			.desName{
				color: #333;
				width: 120rpx;
				text-align: right;
				margin-right: 30rpx;
			}
			.desText{
				flex: 1;
				width: 100rpx;
				text-align: right;
			}
		}
	}
	.cardItem{
		width: 92%;
		margin: 30rpx auto;
		background-color: #fff;
		padding: 30rpx 4%;
		box-sizing: border-box;
		border-radius: 20rpx;
		.cardHead{
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.cardFlex{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.cardMoney{
				color: #ff5757;
				font-size: 28rpx;
				font-weight: normal;
			}
		}
		.cardForm{
			border-radius: 20rpx;
			overflow: hidden;
			.formItem{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				background-color: #d6e0fb;
				.formName{
					padding:30rpx 20rpx;
					width: 140rpx;
					box-sizing: border-box;
				}
				
				.formText{
					flex: 1;
					padding:30rpx 20rpx;
					width: 100rpx;
					background-color: #ebf1fb;
					.formTextDes{
						color: #999;
					}
				}
				.formTextPalin{
					background-color: #dee3f8;
				}
			}
			.formItemPlain{
				background-color: #cbd3fa;
			}
		}
		.formOtherDes{
			color: #666;
			font-size: 24rpx;
			margin-top: 30rpx;
		}
	}
	.hasTop{
		margin-top: -60rpx;
	}
}
</style>
